<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <h2>交车信息：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售合同编号">
              <a-auto-complete
                placeholder="请输入销售合同编号"
                :data-source="contractNoSource"
                @select="contractNoSelect"
                @change="contractNoChange"
                v-decorator="['contractNo', { rules: [{ required: true, message: '必填项' }] }]"

              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单号">
              <a-input
                placeholder="请输入销售合同对应的订单号"
                v-decorator="['orderNumber', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!--   <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车型品牌">
              <a-input
                placeholder="车型品牌"
                v-decorator="['carBrand', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="汽车型号">
              <a-input placeholder="请输入汽车型号" v-decorator="['carModel', { rules: [{ required: true, message: '必填项' }] }]" />
            </a-form-item>
          </a-col>
        </a-row>

        -->
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交车地点">
              <a-input
                placeholder="预定交车地点"
                v-decorator="['deliveryAddr', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交车时间">
              <a-date-picker
                placeholder="请输入预定交车时间"
                style="width: 100%"
                :showTime="true"
                format="yyyy-MM-DD HH:mm:ss"
                v-decorator="['deliveryTime', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>车辆信息</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车架号">
              <a-input
                placeholder="请输入车架号"
                v-decorator="['carVin', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发动机号">
              <a-input
                placeholder="请输入发动机号"
                v-decorator="['engineNumber', { rules: [{ required: true, message: '请输入发动机号' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="品牌及规格型号">
              <a-input
                placeholder="请输入品牌及规格型号"
                v-decorator="['carBrandNumber', { rules: [{ required: false, message: '请输入品牌及规格型号' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="动力蓄电池组编号">
              <a-input
                placeholder="请输入动力蓄电池组编号"
                v-decorator="['batteryNumber', { rules: [{ required: false, message: '请输入动力蓄电池组编号' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="外饰颜色">
              <a-input
                placeholder="请输入外饰颜色"
                v-decorator="['carColor', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内饰颜色">
              <a-input
                placeholder="内饰颜色"
                v-decorator="['interiorColor', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>交易信息(与"机动车销售统一发票"信息一致)</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开票日期">
              <a-date-picker
                placeholder="请输入开票日期"
                style="width: 100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="['invoiceTime', { rules: [{ required: true, message: '请输入订单日期' }] }]"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发票代码">
              <a-input
                placeholder="发票代码"
                v-decorator="['invoiceCode', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发票号码">
              <a-input
                placeholder="发票号码"
                v-decorator="['invoiceNumber', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="不含税价">
              <a-input-number
                placeholder="不含税价"
                style="width: 100%"
                v-decorator="['excludingTaxPrice', { rules: [{ required: true, message: '请输入不含税价' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="价税合计">
              <a-input-number
                placeholder="请输入价税合计"
                style="width: 100%"
                v-decorator="['invoicePrice', { rules: [{ required: true, message: '请输入价税合计' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="总实收">
              <a-input-number
                placeholder="请输入总实收"
                style="width: 100%"
                v-decorator="['receivedamount', { rules: [{ required: true, message: '请输入总实收' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>交付方信息</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业名称">
              <a-input
                placeholder="请输入企业名称"
                style="width: 100%"
                v-decorator="['enterpriseName', { rules: [{ required: false, message: '请输入企业名称' }] }]"
              />
            </a-form-item>
          </a-col>

          <!-- <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="社会信用统一代码">
              <a-input
                placeholder="请输入社会信用统一代码"
                style="width: 100%"
                v-decorator="['enterpriseId', { rules: [{ required: true, message: '请输入社会信用统一代码' }] }]"
              />
            </a-form-item>
          </a-col>-->
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付专员">
              <a-auto-complete
                placeholder="请输入交付专员"
                style="width: 100%"
                :data-source="saleSource"
                @select="saleSelect"
                @change="saleChange"
                v-decorator="['salesName', { rules: [{ required: true, message: '请输入交付专员' }] }]"
              />
            </a-form-item>
            <!-- 改变输入框的时候触发函数调用接口显示信息 -->
          </a-col>
        </a-row>
        <!--
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售区域">
              <a-select
                v-decorator="['region', { rules: [{ required: true, message: '请选择销售区域' }] }]"
                placeholder="销售区域"
              >
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="黄浦区">黄浦区</a-select-option>
                <a-select-option value="徐汇区">徐汇区</a-select-option>
                <a-select-option value="长宁区">长宁区</a-select-option>
                <a-select-option value="静安区">静安区</a-select-option>
                <a-select-option value="普陀区">普陀区</a-select-option>
                <a-select-option value="虹口区">虹口区</a-select-option>
                <a-select-option value="杨浦区">杨浦区</a-select-option>
                <a-select-option value="闵行区">闵行区</a-select-option>
                <a-select-option value="宝山区">宝山区</a-select-option>
                <a-select-option value="嘉定区">嘉定区</a-select-option>
                <a-select-option value="浦东新区">浦东新区</a-select-option>
                <a-select-option value="金山区">金山区</a-select-option>
                <a-select-option value="松江区">松江区</a-select-option>
                <a-select-option value="青浦区">青浦区</a-select-option>
                <a-select-option value="奉贤区">奉贤区</a-select-option>
                <a-select-option value="崇明区">崇明区</a-select-option>
                <a-select-option value="外省">外省</a-select-option>
                <a-select-option value="线上平台">线上平台</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售地址">
              <a-input
                placeholder="请输入销售地址"
                v-decorator="['businessAddress', { rules: [{ required: true, message: '请输销售地址' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        -->
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付专员联系电话">
              <a-auto-complete
                :data-source="deliverSource"
                @select="deliverSelect"
                @change="deliverChange"
                placeholder="请输入交付专员联系电话"
                v-decorator="['salesPhone', { rules: [{ required: true, message: '请输入交付专员联系电话' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>


        <a-row>
          <h2>接收方信息</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接收方姓名">
              <a-input
                placeholder="请输入接收方姓名"
                v-decorator="['buyerName', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接收方手机号码">
              <a-input
                placeholder="请输入接收方手机号码"
                v-decorator="['buyerPhone', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="证件类型">
              <a-select
                v-decorator="['pinType', { rules: [{ required: true, message: '必填项' }] }]"
                placeholder="请输入证件类型"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="1">身份证</a-select-option>
                <a-select-option value="2">护照</a-select-option>
                <a-select-option value="3">士兵证军官证</a-select-option>
                <a-select-option value="4">港澳居民居住证</a-select-option>
                <a-select-option value="5">港澳居民来往内地通行证</a-select-option>
                <a-select-option value="6">台湾居民居住证</a-select-option>
                <a-select-option value="7">台湾居民来往大陆通行证</a-select-option>
                <a-select-option value="8">外国人永久居留身份证</a-select-option>
                <a-select-option value="9">其他有效身份证明</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="证件号码">
              <a-input
                placeholder="请输入证件号码"
                v-decorator="['pinNumber', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>交付清单</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付清单">
              <a-textarea
                style="width: 200%"
                placeholder="请输入交付清单"
                v-decorator="['deliverContents', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- <a-row>
          <h2>随车附件</h2>
        </a-row>

        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="随车附件">
              <a-textarea
                placeholder="请输入随车附件"
                v-decorator="['accessoriesContents', { rules: [{ required: true, message: '必填项' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>-->
      </a-form>
    </a-spin>
    <a-button type="primary" @click="saveDraft">暂存</a-button>
  </a-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'CxmDeliverManagerModal',
  data() {
    return {
      title: '交易信息',
      visible: false,
      model: {},
      saleSource: [],
      deliverSource: [],
      SaleInfosLike: [],
      contractNoSource: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmDeliverManager/add',
        edit: '/cxm/cxmDeliverManager/edit',
        saveDraft: 'cxm/cxmCommonBusiness/saveDraft',
        getDraft: 'cxm/cxmCommonBusiness/getDraft',
        getSaleInfosLike: 'cxm/cxmSalesInfo/getSaleInfosLike',
        getContractNo: 'cxm/cxmDeliverManager/getContractNo',
        getSaleInfos: 'cxm/cxmDeliverManager/getSaleInfos'
      },
    }
  },
  created() {
  },
  methods: {
    contractNoSelect(value) {
      console.log(value);
      let httpurl = this.url.getSaleInfos;
      let that = this;
      getAction(httpurl, { contractNo: value }).then((res) => {
        if (res.success) {
          console.log(res.result);
          that.form.setFieldsValue({
            interiorColor: res.result.interiorColor,
            carColor: res.result.carColor,
            //carBrand:res.result.carBrand,
            deliveryTime: res.result.deliveryTime ? moment(res.result.deliveryTime) : null,
            engineNumber: res.result.engineNumber,
            deliveryAddr: res.result.deliveryAddr,
            //operationAddr:res.result.operationAddr,
            //enterpriseUscc:res.result.enterpriseUscc,
            carVin: res.result.carVin,
            enterpriseName: res.result.enterpriseName,
            orderNumber:res.result.orderNumber,
            invoiceCode: res.result.invoiceCode,
              invoiceNumber: res.result.invoiceNumber,
              invoicePrice: res.result.invoicePrice,
              invoiceTime: res.result.invoiceTime ? moment(res.result.invoiceTime) : null,
              // orderNumber: res.result.orderNumber,
            buyerName:res.result.buyerName,
            buyerPhone:res.result.buyerPhone,
             pinType:res.result.pinType,
            pinNumber:res.result.pinNumber,
            deliverContents:''
          })
        }
      })
    },
    //查找合同号序列
    contractNoChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("contractNo"));
        let httpurl = this.url.getContractNo;
        let params = {
          contractNo: this.form.getFieldValue("contractNo")
        }
        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          if (res.success) {
            /* res.result = [
              '123123123',
              '456456456'
            ]; */
            this.contractNoSource = [];
            for (let i = 0; i < res.result.length; i++) {
              this.contractNoSource.push(res.result[i])
            }
          }
        })
      }, 100);
    },
    saleSelect(value) {
      console.log('saleSelect', value);
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    saleChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("salesName"));
        let httpurl = this.url.getSaleInfosLike;
        let params = {
          salesName: this.form.getFieldValue("salesName")
        }
        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          if (res.success) {
            /* res.result = [{
              "salesName": "刘里2",
              "salesPhone": "1321321321323"
            }, {
              "salesName": "刘醒2",
              "salesPhone": "1545454541212"
            }]; */
            this.SaleInfosLike = res.result;
            this.saleSource = [];
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName);
              if (i > 8) {
                break;
              }
            }
          }
        })
      }, 100);
    },
    add() {
      const that = this;
      let httpurl = this.url.getDraft;
      let params = {
        bType: "deliver"
      };
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          this.edit(JSON.parse(res.result))
        } else {
          this.edit({})
        }
      })
    },
    edit(record) {
      console.log(record);
      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model);
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          batteryNumber: this.model.batteryNumber,
          buyerName: this.model.buyerName,
          buyerPhone: this.model.buyerPhone,
          carBrandNumber: this.model.carBrandNumber,
          carColor: this.model.carColor,
          carVin: this.model.carVin,
          contractNo: this.model.contractNo,
          deliverContents: this.model.deliverContents,
          deliveryAddr: this.model.deliveryAddr,
          deliveryTime: this.model.deliveryTime ? moment(this.model.deliveryTime) : null,        //时间格式化
          engineNumber: this.model.engineNumber,
          enterpriseName: this.model.enterpriseName,
          interiorColor: this.model.interiorColor,
          orderDate: this.model.orderDate,
          orderNumber: this.model.orderNumber,
          pinNumber: this.model.pinNumber,
          pinType: this.model.pinType,
          salesName: this.model.salesName,
          salesPhone: this.model.salesPhone,
           invoiceCode: this.model.invoiceCode,
              invoiceNumber: this.model.invoiceNumber,
              invoicePrice: this.model.invoicePrice,
              invoiceTime: this.model.invoiceTime ? moment(this.model.invoiceTime) : null
        })
      })

    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          //this.model.id=null;
          console.log("id===="+this.model.id);
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.deliveryTime = formData.deliveryTime ? formData.deliveryTime.format('YYYY-MM-DD HH:mm:ss') : null
          formData.invoiceTime = formData.invoiceTime ? formData.invoiceTime.format('YYYY-MM-DD HH:mm:ss') : null
          formData.confirmedTime = formData.confirmedTime ? formData.confirmedTime.format('YYYY-MM-DD HH:mm:ss') : null

          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    saveDraft() {
      const that = this
      this.form.validateFields((err, values) => {
        let formData = Object.assign(this.model, values);
        //时间格式化
        formData.deliveryTime = formData.deliveryTime ? formData.deliveryTime.format('YYYY-MM-DD HH:mm:ss') : null;
        let httpurl = this.url.saveDraft;

        console.log(JSON.stringify(formData));
        let Data = {};
        Data.btype = "deliver";
        Data.content = JSON.stringify(formData);
        console.log(JSON.parse(JSON.stringify(Data)));
        httpAction(httpurl, Data, 'post')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      })

    },
    deliverSelect(value) {
      console.log('saleSelect', value);
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    deliverChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("salesName"));
        let httpurl = this.url.getSaleInfosLike;
        let params = {
          salesName: this.form.getFieldValue("salesName")
        }

        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          //console.log(res);
          if (res.success) {
            /* res.result = [{
              "salesName": "刘里2",
              "salesPhone": "1321321321323"
            }, {
              "salesName": "刘醒2",
              "salesPhone": "1545454541212"
            }]; */
            this.SaleInfosLike = res.result;
            this.saleSource = [];
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName);
              if (i > 8) {
                break;
              }
            }
          }
        })
      }, 100);
    },
  },
}
</script>

<style lang="less" scoped>
</style>